<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
      <div class="flex items-center gap-8">
        <!-- EduLiveLink Logo -->
        <div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
          <div class="logo-icon w-12 h-12">
            <svg viewBox="0 0 100 100" fill="none">
              <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none"/>
              <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none"/>
              <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)" opacity="0.8"/>
              <circle cx="50" cy="50" r="8" fill="white"/>
              <defs>
                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#7BB3F0"/>
                </linearGradient>
                <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#5BA0F2"/>
                  <stop offset="100%" style="stop-color:#8CC8FF"/>
                </linearGradient>
                <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#6BB0FF"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="flex flex-col">
            <span class="text-xl font-bold text-blue-600">
              EduLiveLink教师端
            </span>
            <span class="text-xs text-black">
              智能教育平台
            </span>
          </div>
        </div>
        
        <div class="flex gap-8">
          <router-link to="/home" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">首页</router-link>
          <router-link to="/courses" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">课程</router-link>
          <router-link to="/resources" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">资源</router-link>
          <router-link to="/live" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">直播</router-link>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <el-button type="primary" size="default" class="rounded px-6 font-medium" @click="showProfile = true">
          我的教学
        </el-button>
      </div>
    </nav>

    <!-- 学习中心主体 -->
    <div class="pt-24">
      <!-- 欢迎区域 -->
      <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
        <div class="container mx-auto px-12">
          <div class="max-w-4xl">
            <h1 class="text-5xl font-bold mb-6">开始您的教学之旅</h1>
            <p class="text-xl leading-relaxed mb-8">
              个性化学习路径，AI智能推荐，让每一分钟的学习都更有价值
            </p>
            <div class="flex items-center gap-6">
              <div class="flex items-center gap-2">
                <span class="text-3xl font-bold">{{ studyStats.totalCourses }}</span>
                <span class="text-lg">门课程</span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-3xl font-bold">{{ studyStats.studyHours }}</span>
                <span class="text-lg">教学时长</span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-3xl font-bold">{{ studyStats.certificates }}</span>
                <span class="text-lg">获得证书</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习路径选择 -->
    <div class="py-16 bg-white">
      <div class="container mx-auto px-12">
        <h2 class="text-4xl font-bold text-center mb-4 text-gray-900">选择教学路径</h2>
        <p class="text-xl text-gray-600 text-center mb-16">根据您的兴趣和目标，选择最适合的教学课程</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          <div 
            v-for="path in learningPaths" 
            :key="path.id"
            class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"
            @click="startLearningPath(path)"
          >
            <div class="h-48 relative overflow-hidden" :class="path.bgClass">
              <div class="absolute inset-0 bg-gradient-to-br opacity-80" :class="path.gradientClass"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-8xl opacity-20">{{ path.icon }}</span>
              </div>
              <div class="absolute top-4 right-4">
                <span class="bg-white bg-opacity-90 text-xs font-medium px-3 py-1 rounded-full text-gray-700">
                  {{ path.level }}
                </span>
              </div>
              <div class="absolute bottom-4 left-4">
                <span class="text-white text-2xl font-bold">{{ path.courses }}门课程</span>
              </div>
            </div>
            
            <div class="p-8">
              <h3 class="text-2xl font-bold mb-4 text-gray-900">{{ path.title }}</h3>
              <p class="text-gray-600 mb-6 leading-relaxed">{{ path.description }}</p>
              
              <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-4">
                  <div class="flex items-center gap-1">
                    <span class="text-yellow-400">⭐</span>
                    <span class="text-sm font-medium">{{ path.rating }}</span>
                  </div>
                  <div class="flex items-center gap-1">
                    <span class="text-gray-400">👥</span>
                    <span class="text-sm text-gray-600">{{ path.students }}人在学</span>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-sm text-gray-500">预计时长</div>
                  <div class="text-lg font-bold text-blue-600">{{ path.duration }}</div>
                </div>
              </div>
              
              <div class="mb-6">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-sm font-medium text-gray-700">教学进度</span>
                  <span class="text-sm text-gray-600">{{ path.progress }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-blue-600 h-2 rounded-full transition-all duration-300" :style="{ width: path.progress + '%' }"></div>
                </div>
              </div>
              
              <el-button 
                type="primary" 
                size="default" 
                class="w-full rounded px-6 font-medium"
                @click.stop="startLearningPath(path)"
              >
                {{ path.progress > 0 ? '继续教学' : '开始教学' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI学习助手 -->
    <div class="py-16 bg-gradient-to-r from-purple-50 to-blue-50">
      <div class="container mx-auto px-12">
        <div class="max-w-4xl mx-auto text-center">
          <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full mx-auto mb-8 flex items-center justify-center">
            <span class="text-white text-4xl">🤖</span>
          </div>
          <h2 class="text-4xl font-bold mb-6 text-gray-900">AI智能学习助手</h2>
          <p class="text-xl text-gray-600 mb-8 leading-relaxed">
            基于您的教学习惯和进度，AI助手为您量身定制教学计划，帮您实时为学生答疑解惑，让教学更高效
          </p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            <div class="bg-white rounded-xl p-6 shadow-md">
              <div class="text-3xl mb-4">📊</div>
              <h3 class="text-lg font-semibold mb-2">智能分析</h3>
              <p class="text-gray-600 text-sm">分析学习数据，优化学习路径</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-md">
              <div class="text-3xl mb-4">💡</div>
              <h3 class="text-lg font-semibold mb-2">个性推荐</h3>
              <p class="text-gray-600 text-sm">根据兴趣推荐相关课程内容</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-md">
              <div class="text-3xl mb-4">🎯</div>
              <h3 class="text-lg font-semibold mb-2">目标导向</h3>
              <p class="text-gray-600 text-sm">制定明确目标，追踪学习成果</p>
            </div>
          </div>
          <el-button 
            type="primary" 
            size="default" 
            class="rounded px-6 font-medium"
            @click="startAIChat"
          >
            与AI助手对话
          </el-button>
        </div>
      </div>
    </div>

    <!-- 最近学习 -->
    <div class="py-16 bg-white">
      <div class="container mx-auto px-12">
        <div class="flex items-center justify-between mb-12">
          <h2 class="text-4xl font-bold text-gray-900">最近学习</h2>
          <el-button class="rounded px-6 font-medium" @click="viewAllHistory">查看全部</el-button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div 
            v-for="item in recentStudy" 
            :key="item.id"
            class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer"
            @click="continueStudy(item)"
          >
            <div class="h-32 bg-gradient-to-br from-blue-400 to-purple-500 relative">
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-4xl opacity-30">{{ item.icon }}</span>
              </div>
              <div class="absolute bottom-2 left-2 text-white text-xs">
                {{ item.lastStudy }}
              </div>
            </div>
            <div class="p-4">
              <h4 class="font-semibold mb-2 text-gray-900 text-sm line-clamp-2">{{ item.title }}</h4>
              <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
                <span>进度: {{ item.progress }}%</span>
                <span>{{ item.duration }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-1">
                <div class="bg-blue-600 h-1 rounded-full" :style="{ width: item.progress + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习档案弹窗 -->
    <el-dialog v-model="showProfile" title="我的学习档案" width="800px" class="rounded-2xl">
      <div class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="bg-blue-50 rounded-xl p-6 text-center">
            <div class="text-3xl font-bold text-blue-600 mb-2">{{ studyStats.totalCourses }}</div>
            <div class="text-gray-600">学习课程</div>
          </div>
          <div class="bg-green-50 rounded-xl p-6 text-center">
            <div class="text-3xl font-bold text-green-600 mb-2">{{ studyStats.studyHours }}h</div>
            <div class="text-gray-600">学习时长</div>
          </div>
          <div class="bg-yellow-50 rounded-xl p-6 text-center">
            <div class="text-3xl font-bold text-yellow-600 mb-2">{{ studyStats.certificates }}</div>
            <div class="text-gray-600">获得证书</div>
          </div>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold mb-4">学习成就</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div v-for="achievement in achievements" :key="achievement.id" class="text-center">
              <div class="w-16 h-16 mx-auto mb-2 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center">
                <span class="text-white text-2xl">{{ achievement.icon }}</span>
              </div>
              <div class="text-sm font-medium text-gray-900">{{ achievement.title }}</div>
              <div class="text-xs text-gray-500">{{ achievement.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 学习档案弹窗
const showProfile = ref(false)

// 学习统计数据
const studyStats = ref({
  totalCourses: 12,
  studyHours: 156,
  certificates: 8
})

// 总体学习进度
const overallProgress = computed(() => {
  return Math.round((studyStats.value.studyHours / 200) * 100)
})

// 学习路径数据
const learningPaths = ref([
  {
    id: 1,
    title: '人工智能工程师',
    description: '从零基础到AI专家，掌握机器学习、深度学习核心技术，成为AI领域的技术专家',
    icon: '🤖',
    level: '进阶',
    courses: 15,
    duration: '6个月',
    rating: 4.9,
    students: 2340,
    progress: 35,
    bgClass: 'bg-blue-500',
    gradientClass: 'from-blue-600 to-purple-600'
  },
  {
    id: 2,
    title: '全栈开发工程师',
    description: '掌握前后端开发技术栈，成为能够独立完成项目的全栈工程师',
    icon: '💻',
    level: '中级',
    courses: 20,
    duration: '8个月',
    rating: 4.8,
    students: 3456,
    progress: 68,
    bgClass: 'bg-green-500',
    gradientClass: 'from-green-600 to-blue-600'
  },
  {
    id: 3,
    title: '数据科学专家',
    description: '学习数据分析、机器学习算法，成为数据驱动决策的专业人才',
    icon: '📊',
    level: '高级',
    courses: 12,
    duration: '5个月',
    rating: 4.7,
    students: 1876,
    progress: 0,
    bgClass: 'bg-purple-500',
    gradientClass: 'from-purple-600 to-pink-600'
  },
  {
    id: 4,
    title: 'UI/UX设计师',
    description: '掌握现代设计理念和工具，创造优秀的用户体验设计',
    icon: '🎨',
    level: '入门',
    courses: 10,
    duration: '4个月',
    rating: 4.6,
    students: 2987,
    progress: 22,
    bgClass: 'bg-pink-500',
    gradientClass: 'from-pink-600 to-red-600'
  },
  {
    id: 5,
    title: '区块链开发者',
    description: '学习区块链技术和智能合约开发，成为Web3时代的开发者',
    icon: '⛓️',
    level: '高级',
    courses: 8,
    duration: '4个月',
    rating: 4.5,
    students: 1234,
    progress: 0,
    bgClass: 'bg-yellow-500',
    gradientClass: 'from-yellow-600 to-orange-600'
  },
  {
    id: 6,
    title: '云计算架构师',
    description: '掌握云计算平台和架构设计，成为企业数字化转型的技术领导者',
    icon: '☁️',
    level: '专家',
    courses: 14,
    duration: '7个月',
    rating: 4.8,
    students: 987,
    progress: 12,
    bgClass: 'bg-indigo-500',
    gradientClass: 'from-indigo-600 to-blue-600'
  }
])

// 最近学习记录
const recentStudy = ref([
  {
    id: 1,
    title: 'Python机器学习基础',
    icon: '🐍',
    progress: 75,
    duration: '2.5h',
    lastStudy: '2小时前'
  },
  {
    id: 2,
    title: 'Vue.js组件开发',
    icon: '💚',
    progress: 45,
    duration: '1.8h',
    lastStudy: '昨天'
  },
  {
    id: 3,
    title: '数据结构与算法',
    icon: '🔢',
    progress: 90,
    duration: '3.2h',
    lastStudy: '3天前'
  },
  {
    id: 4,
    title: 'UI设计原理',
    icon: '🎨',
    progress: 30,
    duration: '1.5h',
    lastStudy: '1周前'
  }
])

// 学习成就
const achievements = ref([
  { id: 1, title: '初学者', icon: '🌱', date: '2024-01-15' },
  { id: 2, title: '坚持学习', icon: '🔥', date: '2024-01-20' },
  { id: 3, title: '知识探索者', icon: '🔍', date: '2024-02-01' },
  { id: 4, title: '技能大师', icon: '🏆', date: '2024-02-10' }
])

// 方法
const startLearningPath = (path) => {
  ElMessage.success(`开始学习：${path.title}`)
  // 这里可以跳转到具体的学习页面或课程详情
  router.push(`/courses?path=${path.id}`)
}

const startAIChat = () => {
  ElMessage.info('正在启动AI学习助手...')
  // 这里可以打开AI聊天界面或跳转到AI助手页面
}

const continueStudy = (item) => {
  ElMessage.success(`继续学习：${item.title}`)
  // 这里可以跳转到具体的课程学习页面
}

const viewAllHistory = () => {
  ElMessage.info('查看全部学习历史')
  // 这里可以跳转到学习历史页面
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
